import style from "./SearchPage.module.css";
import React, { useEffect } from "react";
import { FilterArea, ProductList } from "../../components";
import { MainLayout } from "../../layouts/mainLayout";
import { useParams, useLocation } from "react-router-dom";
import { Spin } from "antd";
import { searchProduct } from "../../redux/ProductSearch/slice";
import { useSelector } from "../../hook";
import { useDispatch } from "react-redux";

interface MatchParams {
  keywords: string;
  
}

export const SearchPage: React.FC = () => {
  const { keywords} = useParams<MatchParams>();
  console.log(keywords);

  const loading = useSelector((state) => state.productSearch.loading);
  const error = useSelector((state) => state.productSearch.error);
  const pagination = useSelector((state) => state.productSearch.pagination);
  const productList = useSelector((state) => state.productSearch.SearchList);

  const dispatch = useDispatch();
  const location = useLocation();

  useEffect(() => {
    dispatch(
      searchProduct({
        nextPage: 1,
        pageSize: 10,
        keywords,
      })
    );
  }, [location]);
  const onPageChange = (nextPage, pageSize) => {
    dispatch(
      searchProduct({
        nextPage,
        pageSize,
        keywords,
      })
    );
  };

  if (loading) {
    return (
      <Spin
        size="large"
        style={{
          marginTop: 200,
          marginBottom: 200,
          marginLeft: "auto",
          marginRight: "auto",
          width: "100%",
        }}
      />
    );
  } else if (error) {
    return <div>{error}</div>;
  }

  return (
    <>
      <MainLayout>
        {/* 分类过滤器 */}
        <div className={style["product-list-container"]}>
          <FilterArea />
        </div>
        {/* 产品列表 */}
        <div className={style["product-list-container"]}>
          <ProductList
            data={productList}
            paging={pagination}
            onPageChange={onPageChange}
          />
        </div>
      </MainLayout>
    </>
  );
};
